<template>
  <div class="detail-container">
    <div class="detail-header">
      <div class="left c-shadow">
        <h3>{{entname}}<span v-if="riskInfo.prediction">预警中</span></h3>
        <ul class="info-list">
          <li class="min" :title="baseInfo.legalPerson"><span>法人：</span>{{baseInfo.legalPerson}}</li>
          <li class="min"><span class="big">监管状态：</span>{{riskInfo.statusWord}}</li>
          <li class="min" style="margin-top: -2px;" v-if="riskInfo.beaconValue < 60"><span class="big flames">烽火指数：</span><span class="hot-number">{{riskInfo.beaconValue}}</span></li>
          <li class="min riskNum" v-else><span class="big flames">烽火指数：</span><span class="icon-risk"></span><span class="hot-number" style="margin:2px 0 0 -10px">{{riskInfo.beaconValue}}</span></li>
          <li><span>注册时间：</span>{{baseInfo.registerDate | dateFormat}}</li>
          <li><span class="big">最新预警时间：</span>{{riskInfo.predictionDate | dateFormat}}</li>
          <li class="min"><span>注册资金：</span>{{baseInfo.money}}{{baseInfo.moneyCurrency}}</li>
          <li :title="riskInfo.predictionWord" class="warning-type-word min"><span class="big">风险类型：</span>{{riskInfo.predictionWord}}</li>
          <li class="min" :title="baseInfo.phone"><span class="s-min">电话：</span>{{baseInfo.phone}}</li>
          <li><span>地址：</span>{{baseInfo.location}}</li>
        </ul>
        <div class="detail-btn-group">
          <el-button type="info" v-if="riskInfo.status !== 0" @click.prevent="openDialog('commonly')" plain>设为一般</el-button>
          <el-button type="warning" v-if="riskInfo.status !== 1" @click.prevent="openDialog('important')" plain>重点监控</el-button>
          <el-button type="success" v-if="riskInfo.status !== 2" @click.prevent="openDialog('safe')" plain>设为安全</el-button>
          <el-button type="primary" v-if="riskInfo.status !== 3" @click.prevent="openDialog('shooting')" plain>排查处理</el-button>
        </div>
      </div>
      <div class="right c-shadow">
        <div id="detailHeaderChart" class="detail-header-chart"></div>
      </div>
    </div>
    <jSubNav :items="navItems" class="subnav"></jSubNav>
    <j-dialog :initTitle="dialogTitle" ref="importantDia" class="detail-dialog" @closing="dialogClose">
      <h5 v-if="dialogTitle === '设为安全'">请选择安全期限</h5>
      <p v-if="dialogTitle === '设为安全'">
        <span v-for="(item,index) in securityDate" v-bind:key="index">
          <input :id="'securityIndex'+index" type="radio" name="security" :value="index+1" v-model="categoryValue"/>
          <label :for="'securityIndex'+index">{{item}}</label>
        </span>
      </p>
      <h5>{{dialogSubtitle}}</h5>

      <p v-if="dialogTitle === '重点监控'">
        <span v-for="(item,index) in securityDate1" v-bind:key="index+6">
          <input :id="'security2Index'+index" type="radio" name="operate" :value="index+6" v-model="operateValue"/>
          <label :for="'security2Index'+index">{{item}}</label>
        </span>
      </p>
      <p v-if="dialogTitle === '设为安全'">
        <span v-for="(item,index) in securityDate2" v-bind:key="index+9">
          <input :id="'security3Index'+index" type="radio" name="operate" :value="index+9" v-model="operateValue"/>
          <label :for="'security3Index'+index">{{item}}</label>
        </span>
      </p>
      <p v-if="dialogTitle === '已处理'">
        <span v-for="(item,index) in securityDate3" v-bind:key="index+12">
          <input :id="'security4Index'+index" type="radio" name="operate" :value="index+12" v-model="operateValue"/>
          <label :for="'security4Index'+index">{{item}}</label>
        </span>
      </p>

      <p v-if="dialogTitle === '一般监控'">
        <span v-for="(item,index) in securityDate4" v-bind:key="index+15">
          <input :id="'security5Index'+index" type="radio" name="operate" :value="index+15" v-model="operateValue"/>
          <label :for="'security5Index'+index">{{item}}</label>
        </span>
      </p>
      <textarea name="" id="other_value" cols="30" rows="10" v-if="dialogTextShow" v-model="text"></textarea>
      <!-- TODOS: -->
      <h5 class="operate-man">操作人：{{realName}}</h5>
      <p class="errMsg">{{errMsg}}</p>
      <div class="btn">
        <button class="save-btn" @click="dialogEntrue()">确 定</button>
        <button class="cancle-btn" @click="dialogClose()">取 消</button>
      </div>
    </j-dialog>
    <router-view></router-view>
  </div>
</template>
<script>
import { jSubNav, jDialog } from '../../components'
import { entdetail as api } from '../../api'
export default {
  data() {
    return {
      dialogTitle: '重点监控',
      dialogSubtitle: '请选择操作原因',
      categoryValue: 26,
      operateValue: 0,
      dialogTextShow: false,
      entid: 0,
      entname: '',
      realName: '',
      baseInfo: {},
      riskInfo: {},
      status: ['一般状态', '重点监控', '设为安全', '已处理'],
      statusCode: 0,
      complianceNum: 12,
      // prediction: ['无预警类型', '负面舆情', '特征词命中'],
      prewarningTypes: [
        { name: '负面舆情', flag: 'a' },
        { name: '特征词命中', flag: 'b' },
        { name: '合规风险', flag: 'c' },
        { name: '关联风险', flag: 'd' },
        { name: '传播风险', flag: 'e' },
        { name: '经营风险', flag: 'g' },
        { name: '收益率风险', flag: 'h' },
        { name: '投诉风险', flag: 'i' }
      ],
      securityDate: ['一个月', '三个月', '六个月', '一年', '永远安全'],
      securityDate1: ['经排查风险较高', '近期风险较大', '其他'],
      securityDate2: ['已排查无风险', '暂无风险', '其他'],
      securityDate3: ['已立案调查', '线下已处理', '其他'],
      securityDate4: ['经排查暂无风险', '其他'],
      text: '',
      errMsg: '',
      navItems: [
        {
          name: '基本信息',
          path: 'baseinfo2',
          exit: true
        },
        {
          name: `合规风险`,
          path: 'riskcompliance2',
          riskCount: 0,
          exit: true
        },
        {
          name: '经营风险',
          path: 'riskmanagement2',
          riskCount: 0,
          exit: true
        },
        {
          name: '舆情风险',
          path: 'specialword2',
          riskCount: 0,
          exit: true
        }
      ]
    }
  },
  watch: {
    operateValue(value) {
      this.dialogTextShow =
        +value === 8 || +value === 11 || +value === 14 || +value === 16
    }
  },
  methods: {
    // getDataCount() {
    //   let param = {
    //     entName: this.entname
    //   }
    //   api.getDataCount(param).then(rtn => {
    //     if (!rtn.data) return
    //     this.navItems[1].riskCount = rtn.data.compliRiskCount
    //     this.navItems[2].riskCount = rtn.data.manageRiskCount
    //     this.navItems[3].riskCount =
    //       parseInt(rtn.data.opinionRiskCount) +
    //       parseInt(rtn.data.keywordRiskCount)
    //     this.navItems[4].riskCount = rtn.data.relationRiskCount
    //     this.navItems[5].riskCount = rtn.data.profitRiskCount
    //     this.navItems[6].riskCount = rtn.data.propagateRiskCount
    //   })
    // },
    getWarningTypeStr(str) {
      return str
        .split(',')
        .map(item => {
          let flag = this.prewarningTypes.find(item1 => {
            if (item !== 'f') {
              return item1.flag === item
            }
          }
          )
          if (flag) {
            return flag.name
          }
        })
        .join(',')
    },
    initChart() {
      // eslint-disable-next-line
      const chartEle = echarts.init(
        document.getElementById('detailHeaderChart')
      )
      const option = {
        backgroundColor: '#fff',
        title: {
          text: '近6个月企业烽火指数走势图',
          show: true,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 12,
            color: '#999'
          },
          left: 'center',
          top: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#999'
              },
              rotate: 45
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                // eslint-disable-next-line
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0, 136, 212, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 136, 212, 0.2)'
                    }
                  ],
                  false
                )
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#999'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#ccc'
              }
            }
          }
        ],
        series: [
          {
            name: '烽火指数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(0, 136, 212, 0.4)'
                // shadowColor: 'rgba(0, 0, 0, 0.1)',
                // shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: []
          }
        ]
      }
      let params = {
        entId: this.entid,
        entName: this.entname
      }
      api.getWarningChart(params).then(rtn => {
        let data = JSON.parse(rtn.data)
        let date = Object.keys(data)
        let value = Object.values(data)
        option.xAxis[0].data = date
        option.series[0].data = value
        chartEle.setOption(option)
      })
    },
    openDialog(flag) {
      this.dialogTextShow = false
      switch (flag) {
        case 'commonly':
          this.dialogTitle = '一般监控'
          this.statusCode = 0
          break
        case 'important':
          this.dialogTitle = '重点监控'
          this.statusCode = 1
          break
        case 'safe':
          this.dialogTitle = '设为安全'
          this.statusCode = 2
          break
        case 'shooting':
          this.dialogTitle = '已处理'
          this.statusCode = 3
          break
      }
      this.$refs.importantDia.show = true
    },
    getEntDetail() {
      let params = {
        entId: 1,
        entName: this.entname
      }
      api.getBusinessInfo(params).then(rtn => {
        this.baseInfo = rtn.data
      })
      api.getRiskBaseinfo(params).then(rtn => {
        this.riskInfo = rtn.data
        this.riskInfo.statusWord = this.status[this.riskInfo.status]
        this.riskInfo.predictionWord = this.getWarningTypeStr(
          this.riskInfo.predictionType
        )
      })
    },
    dialogEntrue() {
      this.errMsg = ''
      let params = {
        id: this.entid,
        status: this.statusCode
      }
      let params2 = {
        realName: this.realName, //  操作人
        status: this.statusCode, //  操作类型 。 0-一般状态，1重点监控， 2设为安全，3已处理。
        entName: this.entname //  企业名称
      }
      let index = this.operateValue
      if (this.securityDate[this.categoryValue - 1] !== undefined) {
        params2.timeLimit = this.securityDate[this.categoryValue - 1]
      }
      if (
        this.statusCode === 1 &&
        this.securityDate1[index - 6] !== undefined
      ) {
        params2.oprateReson = this.securityDate1[index - 6]
      }
      if (
        this.statusCode === 2 &&
        this.securityDate2[index - 9] !== undefined
      ) {
        params2.oprateReson = this.securityDate2[index - 9]
      }
      if (
        this.statusCode === 3 &&
        this.securityDate3[index - 12] !== undefined
      ) {
        params2.oprateReson = this.securityDate3[index - 12]
      }
      if (
        this.statusCode === 0 &&
        this.securityDate4[index - 15] !== undefined
      ) {
        params2.oprateReson = this.securityDate3[index - 15]
      }
      if (
        this.securityDate1[index - 6] === '其他' ||
        this.securityDate2[index - 9] === '其他' ||
        this.securityDate3[index - 12] === '其他' ||
        this.securityDate4[index - 15] === '其他'
      ) {
        params2.oprateReson = this.text
      }
      if (!params2.oprateReson) {
        this.errMsg = '操作原因不能为空'
        return false
      }
      api.setCompanyStatus(params).then(rtn => {
        // console.log(rtn)
        setTimeout(() => {
          this.getEntDetail()
          api.getAddOperationRecord(params2).then(rtn => {})
          this.$refs.importantDia.show = false
        }, 1000)
      })
    },
    dialogClose() {
      this.$refs.importantDia.show = false
      this.categoryValue = ''
      this.operateValue = ''
      this.text = ''
      this.errMsg = ''
    }
  },
  mounted() {
    this.entid = this.$route.query.entid || 0
    this.entname = this.$route.query.entname || ''
    let userInfo = this.$store.state.user.userInfo
    this.realName = userInfo.realName
    // this.getDataCount()
    this.initChart()
    this.getEntDetail()
    /** 恢复页面置顶**/
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  },
  components: {
    jSubNav,
    jDialog
  }
}
</script>
<style lang="scss" scoped>
.detail-header {
  height: 255px;
  display: flex;
  margin-top: 28px;
}
.left {
  height: 100%;
  flex-grow: 61.49;
  margin-right: 20px;
  padding: 0 30px;
  max-width: 840px;
  h3 {
    font-size: 16px;
    height: 70px;
    display: flex;
    align-items: center;
    span {
      color: #ff8a0d;
      background: #ffe6cc;
      padding: 0 10px;
      position: relative;
      display: inline-block;
      font-size: 12px;
      margin-left: 18px;
      height: 20px;
      line-height: 20px;
      &::after {
        content: '';
        position: absolute;
        border: 10px solid transparent;
        border-left-color: #ffe6cc;
        top: 0;
        right: -20px;
      }
    }
  }
  .info-list {
    display: flex;
    flex-wrap: wrap;
    li {
      min-width: 281px;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      span {
        display: inline-block;
        width: 85px;
        color: #a6a6a6;
        &.big {
          width: 115px;
        }
        &.flames {
          width: 90px;
        }
        &.s-min {
          width: 40px;
        }
        &.hot-number {
          font-size: 20px;
          color: #ff3300;
          font-weight: bold;
        }
      }
      .icon-risk {
        width: 30px;
        height: 34px;
        background: url(../../assets/images/risk.png) no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
      }
      &.min {
        min-width: 280px;
        width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &.warning-type-word {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        // width: 60%;
      }
    }
    .riskNum {
      line-height: 21px;
    }
  }
  .detail-btn-group {
    display: flex;
    justify-content: flex-end;
    button {
      padding: 10px 25px;
      font-weight: normal;
    }
  }
}
.right {
  height: 100%;
  width: 350px;
  flex-grow: 36.76;
  .detail-header-chart {
    width: 100%;
    height: 100%;
  }
}
.subnav {
  margin-top: 20px;
}
.detail-dialog {
  width: 545px;
  h5 {
    line-height: 46px;
    font-weight: bold;
    &.operate-man {
      margin: 10px 0 0;
    }
  }
  textarea {
    height: 60px;
    width: 435px;
    margin: 20px 0 0 40px;
  }
  p {
    input {
      margin-left: 20px;
    }
  }
  .btn {
    text-align: center;
    margin-bottom: 10px;
    button {
      cursor: pointer;
    }
    button:nth-child(2) {
      margin-left: 20px;
    }
  }
}
.errMsg {
  color: red;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 20px;
}
</style>



// WEBPACK FOOTER //
// src/view/relationDetail/index.vue